<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery plugin: Tablesorter 2.0 - Grouping Rows Widget</title>

	<!-- jQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

	<!-- Demo stuff -->
	<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="css/jq.css">
	<link href="css/prettify.css" rel="stylesheet">
	<script src="js/prettify.js"></script>
	<script src="js/docs.js"></script>

	<style id="css">tr.group-header td {
		background: #eee;
	}
	.group-name {
		text-transform: uppercase;
		font-weight: bold;
	}
	.group-count {
		color: #999;
	}
	.group-hidden {
		display: none;
	}
	.group-header, .group-header td {
		user-select: none;
		-moz-user-select: none;
	}
	/* collapsed arrow */
	tr.group-header td i {
		display: inline-block;
		width: 0;
		height: 0;
		border-top: 4px solid transparent;
		border-bottom: 4px solid #888;
		border-right: 4px solid #888;
		border-left: 4px solid transparent;
		margin-right: 7px;
		user-select: none;
		-moz-user-select: none;
	}
	tr.group-header.collapsed td i {
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 5px solid #888;
		border-right: 0;
		margin-right: 10px;
	}</style>

	<!-- Tablesorter: required -->
	<link href="../css/theme.blue.css" rel="stylesheet">
	<script src="../js/jquery.tablesorter.js"></script>
	<script src="../js/jquery.tablesorter.widgets.js"></script>

	<!-- grouping widget -->
	<script src="../js/parsers/parser-input-select.js"></script>
	<script src="../js/widgets/widget-grouping.js"></script>

	<script>
	$(function(){
		$('.accordion').accordion({
			heightStyle: 'content',
			collapsible : true
		});
	});
	</script>

	<script id="js">$(function(){

	$("table").tablesorter({
		theme : "blue",
		headers: {
			0: { sorter: "checkbox" },
			3: { sorter: "select" },
			6: { sorter: "inputs" }
		},
		widgets: [ "group", "columns", "zebra" ],
		widgetOptions: {
			group_collapsible : true,  // make the group header clickable and collapse the rows below it.
			group_collapsed   : false, // start with all groups collapsed (if true)
			group_count       : " ({num})", // if not false, the "{num}" string is replaced with the number of rows in the group

			// change these default date names based on your language preferences
			group_months      : [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
			group_week        : [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
			group_time        : [ "AM", "PM" ],

			// this function is used when "group-date" is set to create the date string
			// you can just return date, date.toLocaleString(), date.toLocaleDateString() or d.toLocaleTimeString()
			// reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Conversion_getter
			group_dateString  : function(date) {
				return date.toLocaleString();
			},

			group_formatter   : function(txt, col, table, c, wo) {
				// txt = current text; col = current column
				// table = current table (DOM); c = table.config; wo = table.config.widgetOptions
				if (col === 7 && txt.indexOf("GMT") > 0) {
					// remove "GMT-0000 (Xxxx Standard Time)" from the end of the full date
					txt = txt.substring(0, txt.indexOf("GMT"));
				}
				// If there are empty cells, name the group "Empty"
				return txt === "" ? "Empty" : txt;
			},

			group_callback    : function($cell, $rows, column, table){
				// callback allowing modification of the group header labels
				// $cell = current table cell (containing group header cells ".group-name" & ".group-count"
				// $rows = all of the table rows for the current group; table = current table (DOM)
				// column = current column being sorted/grouped
				if (column === 2) {
					var subtotal = 0;
					$rows.each(function(){
						subtotal += parseInt( $(this).find("td").eq(column).text() );
					});
					$cell.find(".group-count").append("; subtotal: " + subtotal );
				}
			},
			// event triggered on the table when the grouping widget has finished work
			group_complete    : "groupingComplete"
		}
	});

});</script>
</head>
<body id="group">
<div id="banner">
	<h1>table<em>sorter</em></h1>
	<h2>Grouping Rows Widget</h2>
	<h3>Flexible client-side table sorting</h3>
	<a href="index.html">Back to documentation</a>
</div>
<div id="main">

	<p></p>
	<br>

	<div class="accordion">

		<h3><a href="#">Notes</a></h3>
		<div>
		<ul>
			<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
			<li>Please do not use this widget in very large tables (it might be really slow) <del>or when your table includes multiple tbodies</del>.</li>
			<li>In <span class="version">v2.14</span>, added
				<ul>
					<li><code>group_dateString</code> option which is a function that allows you to format the date string when using the <code>group-date</code> header class name. This is the default function:
						<pre class="prettyprint lang-js">group_dateString  : function(date) { return date.toLocaleString(); }</pre>
					Other functions that can be used are <code>date</code> (alone), <code>date.toLocaleString()</code>, <code>date.toLocaleDateString()</code> or <code>d.toLocaleTimeString()</code>. See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Conversion_getter">this reference</a> for more details.</li>
				</ul>
			</li>

			<li>In <span class="version">v2.13</span>, added <code>group_separator</code> option &amp; <code>group-separator-#</code> header class name. To see this in action, check out the <a href="example-parsers-file-type.html">file type parser demo</a>.</li>
			<li>In <span class="version">v2.12</span>, added <code>group_callback</code> &amp; <code>group_complete</code> options. See options section below for details.</li>
			<li>In <span class="version">v2.11</span>:
				<ul>
					<li>The grouping widget now works across multiple tbodies.</li>
					<li>Added <code>group-false</code> header option which disables the grouping widget for a specific column.</li>
					<li>Added the <code>group_collapsed</code> option - get more details in the options block below.</li>
					<li>You can now toggle <strong>all</strong> group rows by holding down the <kbd>Shift</kbd> key while clicking on a group header.</li>
					<li>This widget now works properly with the pager addon (pager addon updated).</li>
				</ul>
			</li>
			<li>Clicking on any of the sortable header cells will cause the column below it to sort and add a group header.</li>
		</ul>
		</div>

		<h3><a href="#">Options</a></h3>
		<div>
			<h3>Group widget default options (added inside of tablesorter <code>widgetOptions</code>)</h3>
			<ul>
				<li><code>group_collapsible</code> (<code>true</code>) - when <code>true</code>, the group headers become clickable and collapse the rows below it.</li>
				<li><code>group_collapsed</code> (<code>false</code>) - when <code>true</code> and <code>group_collapsible</code> is also <code>true</code>, all groups will start collapsed (<span class="version">v2.11</span>).</li>
				<li><code>group_count</code> (<code>&quot; ({num})&quot;</code>) - allows you to add custom formatting, or remove, the group count within the group header. Set it to <code>false</code> or an empty string to remove the count.</li>
				<li><code>group_callback</code> (<code>null</code>) - use this function to further modify the group header to include more information (i.e. group totals). Parameters include (<code>$cell, $rows, column, table</code>). See the example below for more details <span class="version">v2.12</span>.
					<ul>
						<li><code>$cell</code> - current group header table cell (jQuery object).</li>
						<li><code>$rows</code> - current group rows (jQuery object).</li>
						<li><code>column</code> - current table column being grouped (zero-based index).</li>
						<li><code>table</code> - current table (DOM).</li>
					</ul>
				</li>
				<li><code>group_complete</code> (<code>&quot;groupingComplete&quot;</code>) - event triggered on the table when the grouping widget has finished work <span class="version">v2.12</span>.</li>
				<li><code>group_formatter</code> (<code>null</code>) - use this function to modify the group header text before it gets applied. It provides various parameters (<code>txt, col, table, c, wo</code>) to make it work for any of the table columns and data. See the comments in the example below for more details.
					<ul>
						<li><code>txt</code> - current text of the group header.</li>
						<li><code>col</code> - current table column being grouped (zero-based index).</li>
						<li><code>table</code> - current table (DOM).</li>
						<li><code>c</code> - table data from <code>table.config</code>.</li>
						<li><code>wo</code> - table widget options from <code>table.config.widgetOptions</code>.</li>
					</ul>
				</li>
				<li><code>group_separator</code> (<code>&quot;-&quot;</code>) - when the <code>group-separator</code> class name is added, it uses the setting from this option to split the table cell content for grouping <span class="version">v2.13</span>.</li>
				<li>group date/time options - Name arrays included so that the language of the date groups can be modified easily. Defaults (English):
					<ul>
						<li><code>group_months</code> (<code>[ &quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;, &quot;Apr&quot;, &quot;May&quot;, &quot;Jun&quot;, &quot;Jul&quot;, &quot;Aug&quot;, &quot;Sep&quot;, &quot;Oct&quot;, &quot;Nov&quot;, &quot;Dec&quot; ]</code>) - Month names.</li>
						<li><code>group_week</code> (<code>[ &quot;Sunday&quot;, &quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;, &quot;Saturday&quot; ]</code>) - Named days of the week.</li>
						<li><code>group_time</code> (<code>[ &quot;AM&quot;, &quot;PM&quot; ]</code>) - Time of day.</li>
					</ul>
				</li>
			</ul>
		</div>

		<h3><a href="#">Header Class Names</a></h3>
		<div>
			<h3>Group header class names (when changing the grouping, notice that the <em>sort doesn't change, just the position and names of the group headers</em>):</h3>
			<ul>
				<li><code>&quot;group-word&quot;</code> (same as <code>&quot;group-word-1&quot;</code>) - group the rows using the first word it finds in the column's parsed data.</li>
				<li><code>&quot;group-word-n&quot;</code> (<code>&quot;n&quot;</code> can be any number) - group the rows using the nth word in the column<span class="remark">*</span>.</li>
				<li><code>&quot;group-separator&quot;</code> (same as <code>&quot;group-separator-1&quot;</code>) - group the rows using the text between the start and first separator that it finds in the column's parsed data (<span class="version">v2.13</span>).</li>
				<li><code>&quot;group-separator-n&quot;</code> (<code>&quot;n&quot;</code> can be any number) - group the rows using the nth separated group in the column (<span class="version">v2.13</span>)<span class="remark">*</span>.</li>
				<li><code>&quot;group-letter&quot;</code> (same as <code>&quot;group-letter-1&quot;</code>) - group the rows using the first letter it finds in the column's parsed data.</li>
				<li><code>&quot;group-letter-n&quot;</code> (<code>&quot;n&quot;</code> can be any number) - group the rows using letters 1 through n (if n = 2, then it's the first 2 letters) in the column's parsed data.</li>
				<li><code>&quot;group-number&quot;</code> (same as <code>&quot;group-number-1&quot;</code>) - group the rows by the number it finds in the column (step of one).</li>
				<li><code>&quot;group-number-n&quot;</code> (<code>&quot;n&quot;</code> can be any number) - group the rows into blocks of every n values. So, if n = 10, the groups will be 0-9, 10-19, 20-29, etc</li>
				<li><code>&quot;group-date&quot;</code> - group the rows by full date (this shows the current UTC time corrected for your time zone)</li>
				<li><code>&quot;group-date-year&quot;</code> - group the rows by year</li>
				<li><code>&quot;group-date-month&quot;</code> - group the rows by month<span class="remark">*</span></li>
				<li><code>&quot;group-date-day&quot;</code> - group the rows by month/day<span class="remark">*</span></li>
				<li><code>&quot;group-date-week&quot;</code> - group the rows by day of the week<span class="remark">*</span></li>
				<li><code>&quot;group-date-time&quot;</code> - group the rows by time<span class="remark">*</span></li>
				<li><code>&quot;group-false&quot;</code> - disable grouping of rows for a column (<span class="version">v2.11</span>).</li>
			</ul>
			<span class="remark">*</span> When sorting some columns, different group headers with the same group name may exist (try "group-date-week" and "group-date-time"). To make these columns sort specifically by the group you want, you'll need to modify the parser.
		</div>
	</div>

	</p>

<h1>Demo</h1>

<span class="demo-label">Numeric column:</span> <div id="slider0"></div> <span class="numberclass"></span> (includes subtotals)<br>
<span class="demo-label">Animals column:</span> <div id="slider1"></div> <span class="animalclass"></span><br>
<span class="demo-label">Date column:</span> <div id="slider2"></div> <span class="dateclass"></span>

<div id="demo"><table class="tablesorter">
	<thead>
		<tr>
			<th class="group-word"></th> <!-- checkbox status -->
			<th class="group-number">Quality (number)</th> <!-- notice this uses the same class name as the Numeric column, it's just left at 1 -->
			<th class="group-number-10">Numeric (every <span>10</span>)</th>
			<th class="group-letter-1">Priority (letter)</th>
			<th class="group-letter-1">Animals (first <span>letter</span>)</th>
			<th class="group-word-1">Natural Sort (first word)</th>
			<th class="group-word-2">Inputs (second word)</th>
			<!-- try "group-date", "group-date-year", "group-date-month", "group-date-day", "group-date-week" or "group-date-time" -->
			<th class="group-date">Date (<span>Full</span>)</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th></th>
			<th>Quality</th>
			<th>Numeric</th>
			<th>Priority</th>
			<th>Animals</th>
			<th>Natural Sort</th>
			<th>Inputs</th>
			<th>Date</th>
		</tr>
	</tfoot>
	<tbody>
		<tr><td><input type="checkbox" checked></td><td>1</td><td>10</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Koala</td><td>abc 123</td><td><input type="text" value="item: truck" /></td><td>1/13/2013 12:01 AM</td></tr>
		<tr><td><input type="checkbox"></td><td>3</td><td>29</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Kangaroo</td><td>abc 1</td><td><input type="text" value="item: car" /></td><td>1/15/2013</td></tr>
		<tr><td><input type="checkbox"></td><td>2</td><td>10</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Ant</td><td>abc 9</td><td><input type="text" value="item: motorcycle" /></td><td>1/13/2013</td></tr>
		<tr><td><input type="checkbox"></td><td>3</td><td>81</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Bee</td><td>zyx 24</td><td><input type="text" value="item: golf cart" /></td><td>1/11/2013</td></tr>
		<tr><td><input type="checkbox" checked></td><td>3</td><td>21</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Aardwolf</td><td>zyx 55</td><td><input type="text" value="item: scooter" /></td><td>1/13/2013 03:30 AM</td></tr>
		<tr><td><input type="checkbox"></td><td>1</td><td>3</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Bear</td><td>abc 11</td><td><input type="text" /></td><td>1/15/2013</td></tr>
		<tr><td><input type="checkbox"></td><td>4</td><td>12</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Armadillo</td><td>zyx 2</td><td><input type="text" /></td><td>1/15/2013 12:30 PM</td></tr>
		<tr><td><input type="checkbox" checked></td><td>2</td><td>56</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Aardvark</td><td>abc 2</td><td><input type="text" value="item: skateboard" /></td><td>1/22/2013</td></tr>
		<tr><td><input type="checkbox"></td><td>1</td><td>55</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Lion</td><td>abc 9</td><td><input type="text" /></td><td>2/15/2013</td></tr>
		<tr><td><input type="checkbox" checked></td><td>4</td><td>87</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Anteater</td><td>ABC 10</td><td><input type="text" value="item: skates" /></td><td>1/3/2013</td></tr>
		<tr><td><input type="checkbox" checked></td><td>2</td><td>98</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Lemur</td><td>zyx 1</td><td><input type="text" /></td><td>1/11/2013</td></tr>
		<tr><td><input type="checkbox"></td><td>1</td><td>20</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Llama</td><td>zyx 12</td><td><input type="text" /></td><td>12/13/2012</td></tr>
	</tbody>
</table>
</div>

	<h1>Page Header</h1>
	<div>
		<pre class="prettyprint lang-html">&lt;!-- Tablesorter: required --&gt;
&lt;link href=&quot;../css/theme.blue.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../js/jquery.tablesorter.widgets.js&quot;&gt;&lt;/script&gt;

&lt;!-- Grouping widget --&gt;
&lt;script src=&quot;../js/parsers/parser-input-select.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../js/widgets/widget-grouping.js&quot;&gt;&lt;/script&gt;</pre>
	</div>

	<h1>Script</h1>
	<div id="javascript">
		<pre class="prettyprint lang-js"></pre>
	</div>

	<h1>CSS</h1>
	<div id="css">
		<pre class="prettyprint lang-css"></pre>
	</div>

	<h1>HTML</h1>
	<div id="html">
		<pre class="prettyprint lang-html"></pre>
	</div>

	<script>
	/* DEMO ONLY CODE */
	$(function(){
		var startBlock = 10,
			startVal = 1,
			curGroup = 0,
			numcol = 2,
			letcol = 4,
			datecol = 7,
			dateGroups = [ '', 'year', 'month', 'day', 'week', 'time' ];
		// Numeric column slider
		$( "#slider0" ).slider({
			value: startBlock,
			min: 10,
			max: 50,
			step: 10,
			create: function(){
				$('.numberclass').html(' "group-number-' + startBlock + '"');
				$('.tablesorter-header-inner:eq(' + numcol + ')').find('span').html(startBlock);
			},
			slide: function( event, ui ) {
				$('table')[0].config.$headers.eq(numcol)
					.attr('class', function(i,v){
						return v.replace(/group-number-\d+/, 'group-number-' + ui.value);
					})
					.trigger('sorton', [ [[numcol,0]] ]);
				$('.numberclass').html(' "group-number-' + ui.value + '"');
				$('.tablesorter-header-inner:eq(' + numcol + ')').find('span').html(ui.value);
			}
		});
		// animal (letter) column slider
		$( "#slider1" ).slider({
			value: startVal,
			min: 1,
			max: 5,
			step: 1,
			create: function(){
				$('.animalclass').html(' "group-letter-' + startVal + '"');
				$('.tablesorter-header-inner:eq(' + letcol + ')').find('span').html(startVal === 1 ? 'letter' : startVal + ' letters');
			},
			slide: function( event, ui ) {
				$('table')[0].config.$headers.eq(letcol)
					.attr('class', function(i,v){
						return v.replace(/group-letter-\d+/, 'group-letter-' + ui.value);
					})
					.trigger('sorton', [ [[letcol,0]] ]);
				$('.animalclass').html(' "group-letter-' + ui.value + '"');
				$('.tablesorter-header-inner:eq(' + letcol + ')').find('span').html(ui.value === 1 ? 'letter' : ui.value + ' letters');
			}
		});
		// date column slider
		$( "#slider2" ).slider({
			value: curGroup,
			min: 0,
			max: 5,
			step: 1,
			create: function(){
				$('.dateclass').html(' "group-date' + (curGroup > 0 ? '-' + dateGroups[curGroup] : '') + '"');
				$('.tablesorter-header-inner:eq(' + datecol + ')').find('span').html(curGroup === 0 ? 'full' : dateGroups[curGroup]);
			},
			slide: function( event, ui ) {
				$('table')[0].config.$headers.eq(datecol)
					.attr('class', function(i,v){
						return v.replace(/group-date(-\w+)?/, 'group-date' + (ui.value > 0 ? '-' + dateGroups[ui.value] : ''));
					})
					.trigger('sorton', [ [[datecol,0]] ]);
				$('.dateclass').html(' "group-date' + (ui.value > 0 ? '-' + dateGroups[ui.value] : '') + '"');
				$('.tablesorter-header-inner:eq(' + datecol + ')').find('span').html(ui.value === 0 ? 'full' : dateGroups[ui.value]);
			}
		});

	});
	</script>

</div>

</body>
</html>
